<template>
  <div class="Login-Body">
    <mu-appbar style="width: 100%;" color="white" text-color="primary" z-depth="0">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      手机号注册
    </mu-appbar>
    <div class="input-class">
      <mu-container v-show="!codeShow">
        <mu-form ref="form" :model="forgetForm" class="mu-demo-form">
          <mu-form-item label="手机号" prop="username" :rules="usernameRules">
            <mu-text-field iconClass="Phone-Input" color="primary"
                           v-model="forgetForm.username" type="number"
                           placeholder="请输入手机号"
                           fullWidth/>
          </mu-form-item>
          <mu-form-item label="密码" prop="password" :rules="passwordRules">
            <mu-text-field iconClass="Phone-Input" color="primary"
                           v-model="forgetForm.password" type="password" prop="password"
                           placeholder="设置密码,由8-18位数字字母组合"
                           fullWidth/>
          </mu-form-item>
          <mu-form-item style="width: 100%">
            <mu-button round full-width color="primary" @click="next">下一步</mu-button>
          </mu-form-item>
        </mu-form>
      </mu-container>
      <mu-container v-show="codeShow">
        <mu-form ref="codeForm" :model="validateForm" class="mu-demo-form">
          <mu-form-item label="验证码" prop="code" :rules="codeRules">
            <mu-text-field iconClass="Phone-Input" color="primary"
                           v-model="validateForm.code" type="number"
                           placeholder="请输入验证码"
                           fullWidth/>
          </mu-form-item>
          <mu-form-item style="float: right">
            <span v-show="show" @click="getCode">重新获取验证码</span>
            <span v-show="!show" class="count">{{count}} s</span>
          </mu-form-item>
          <mu-form-item style="width: 100%">
            <mu-button round full-width color="primary" @click="submit">确定</mu-button>
          </mu-form-item>
        </mu-form>
      </mu-container>
    </div>
  </div>
</template>

<script>
  import headerBack from '@/components/headerBack';

  export default {
    data() {
      return {
        redirect: this.$route.query.redirect ? this.$route.query.redirect : 'home',
        show: true,
        count: '',
        timer: null,
        codeShow: false,
        usernameRules: [
          {validate: (val) => !!val, message: '必须填写手机号'}
        ],
        passwordRules: [
          {validate: (val) => !!val, message: '必须填写密码'}
        ],
        codeRules: [
          {validate: (val) => !!val, message: '必须填写验证码'}
        ],
        validateForm: {
          code: ''
        },
        forgetForm: {
          username: '',
          password: '',
          isAgree: false
        }
      }
    },
    components: {
      headerBack
    },
    created() {
    },
    watch: {},

    methods: {
      toLogin() {
        this.forget = false;
      },
      toForget() {
        this.forget = true;
      },
      next() {
        this.$refs.form.validate().then((result) => {
          if (!/^((1[3,5,8][0-9])|(14[5,7])|(17[0,3,6,7,8])|(19[7]))\d{8}$/.test(this.forgetForm.username)) {
            this.$toast.info("手机号格式不正确");
          } else if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,18}$/.test(this.forgetForm.password)) {
            this.$toast.info("密码由8-18位数字字母组合")
          } else {
            this.getCode();
          }
        });
      },
      sendCode() {

      },
      submit() {
        this.$refs.codeForm.validate().then((result) => {
          let params = {
            phone: this.forgetForm.username,
            password: this.md5(this.forgetForm.password),
            code: this.validateForm.code
          };
          this.postRequest("/login/register", params).then(res => {
            if (res.code === 200) {
              this.setStore("accessToken", res.data.token);
              this.$router.push({name: this.redirect});
            } else {
              this.$toast.error(res.message);
            }
          });
        });
      },
      clear() {
        this.$refs.form.clear();
        this.validateForm = {
          username: '',
          password: '',
          isAgree: false
        };
      },
      getCode() {
        let params = {
          phone: this.forgetForm.username
        };
        this.postRequest("/login/sendRegCode", params).then(res => {
          if (res.code === 200) {
            this.codeShow = true;
          } else {
            this.$toast.error("发送短信失败，请重试")
          }
        });
        const TIME_COUNT = 60;
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000)
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .mu-text-field-content input {
    color: #fff;
  }

  .titleClass {
    text-align: center;
    font-size: 1.15em;
    margin-right: 15.2%;
  }
</style>
<style scoped lang="less">
  .Login-Body {
    position: fixed;
    background-color: #ffffff;
    height: 100%;
    width: 100%;
    z-index: 99;
  }

  .input-class {
    /*text-align: center;*/
    padding: 5em 2em 0 1em;
  }

  .Phone-Input {
    color: #e52f36;
  }

  .top-button-icon {
    background-color: #474a4f;
    color: #e52f36;
  }

  .Login-Button-One {
    margin-top: 2em;
    width: 96%;
    margin-left: 4%;
  }

  .Login-Button-Two {
    display: none;
  }

  .demo-paper-two {
    display: inline-block;
    height: 100px;
    width: 100px;
    margin: 20px;
    text-align: center;
    background-color: #474a4f;
  }

  .demo-paper-one {
    display: inline-block;
    height: 100px;
    width: 100px;
    margin: 20px;
    text-align: center;
    background-color: #474a4f;
    display: none;
  }

  .demo-paper-two .mu-avatar {
    height: 100px;
    width: 100px;
  }

  .mu-sub-header {
    line-height: 1.5em !important;
    padding: 0 0 1em 0;
    font-size: 1em;
  }
</style>
